<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Requirejs examples</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"></script>
  <style type="text/css">
  .container {
    margin: 1rem auto;
    width: 640px;
    max-width: 90%;
  }

  .example {
    margin-bottom: 2rem;
  }
  .example h2 {
    font-size: 1rem;
  }
  .example .preview {
    display: flex;
  }
  .example .preview img {
    margin-right: 1rem;
  }
  .example pre {
    border: 1px solid #E9E9E9;
    padding: 5px 10px;
    white-space: normal;
  }
  .example input[type="text"] {
    width: 80px;
    font-size: 1rem;
    padding: 4px 8px;
  }
  </style>
</head>
<body>
  <div class="container">
    <div class="example">
      <h2>setImgs(HTMLImageElement[] imgs)</h2>
      <div class="preview">
        <img alt="李连杰" width="40" height="40"/>
        <img alt="Tom Hanks" width="40" height="40"/>
        <img alt="Elizabeth" width="40" height="40" style="border-radius: 100%;"/>
      </div>
    </div>
    <hr/>
    <div class="example">
      <h2>setImg(HTMLImageElement img, string name)</h2>
      <div class="preview">
        <img id="avatar1" width="60" height="60" />
        <input type="text" id="avatar1-name" value="李连杰"/>
      </div>
      <pre id="avatar1-code"></pre>
    </div>
  </div>

  <script>
  requirejs.config({
    paths: {
      namedavatar: '../../dist/namedavatar'
    }
  })

  requirejs(['namedavatar'], function(namedavatar) {
    namedavatar.config({
      nameType: 'firstName'
    });

    // multi avatar
    (function(imgs){
      namedavatar.setImgs(imgs, 'alt')
    })(document.querySelectorAll('img[alt]'));

    // special avatar
    (function(img, input, source){
      var renderAvatar = function() {
        namedavatar.setImg(img, input.value)

        var code = namedavatar.getSVG(input.value).outerHTML
        source.textContent = code
      }

      input.addEventListener('change', renderAvatar, false)
      renderAvatar()
    })(
      document.getElementById('avatar1'),
      document.getElementById('avatar1-name'),
      document.getElementById('avatar1-code')
    );
  })
  </script>
</body>
</html>
